<template>
    <div class="paymentHistory">
        <div style="text-align:center;font-family:'微软雅黑';color:blue;font-size:20px">
            缴费历史记录
        </div>
        <br>
        <div class="contains">
    <el-table
    :data="user" 
    border
    style="width: 1201px">
    <el-table-column
      fixed
      prop="card"
      label="用户卡号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="waterMeterId"
      label="水表id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="waterNum"
      label="用水量 立方米"
      width="150">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价 元/立方米"
      width="150">
    </el-table-column>
    <el-table-column
      prop="payMonth"
      label="月份"
      width="150">
    </el-table-column>
    <el-table-column
      prop="historyMoney"
      label="缴费金额"
      width="150">
    </el-table-column>
  </el-table>

        </div>
         
    </div>
</template>
<style>
    .paymentHistory{
        width: 1400px;
        height: 300px;
        /* position: relative; */
        margin: 0 auto;
        /* border: 1px solid rgb(97, 97, 97); */
     
       
    }
    .contains{
       margin-left: 78px;
    }
</style>
<script>
export default {
    name:'PaymentHistory',
    data(){
        return{
             user: [
        //        {
        //        card: '',
        //        userName: '',
        //        phone: '',
        //        waterMeterId: '',
        //        waterNum: '',
        //        price: '',
        //        payMonth:'',
        //        historyMoney: '',
        // }
        ]
        }
    },
    mounted(){
        console.log(this.$route.query.arrearsData);
        this.user=this.$route.query.arrearsData;
    }
    
}
</script>